<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机选择工具</title>
    <!-- 引入Bootstrap样式文件 -->
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">随机选择工具</h1>
        <form>
            <div class="form-group mb-3">
                <label for="items">输入待选择内容（用英文逗号分隔）：</label>
                <textarea class="form-control" id="items" rows="3"></textarea>
            </div>
            <div class="form-group mb-3">
                <label for="num">要选择的项数：</label>
                <input type="number" class="form-control" id="num" value="1" min="1">
            </div>
            <button type="button" class="btn btn-primary" onclick="generate()">随机选择</button>
        </form>
        <div class="mt-4">
            <p>随机结果：</p>
            <div id="result"></div>
        </div>
    </div>
    <script>
        // 从本地存储中读取随机内容
        const items = localStorage.getItem("items");
        if (items) {
            document.getElementById("items").value = items;
        }

        function generate() {
            const items = document.getElementById("items").value.split(",");
            const num = parseInt(document.getElementById("num").value);

            if (isNaN(num) || num < 1) {
                alert("请选择要选择的项数！");
                return;
            }

            let result = "";
            for (let i = 0; i < num; i++) {
                const randomIndex = Math.floor(Math.random() * items.length);
                result += items[randomIndex].trim();
                if (i < num - 1) {
                    result += ",";
                }
            }
            document.getElementById("result").innerHTML = result;

            // 将随机内容保存到本地存储中
            localStorage.setItem("items", document.getElementById("items").value);
        }
    </script>
</body>

</html>